<!DOCTYPE html>
<html lang="utf-8">

	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>青之巅-每天学一点，每天强一点</title>
		<#include "./common/reslist.html">
	</head>

	<body>
        <div id="new_header">
            <div class="page-container new-header clearfix" id="nav">
                <ul class="nav-item">
                    <li><a href="/" target="_self">首页</a></li>
                    <li><a href="/course/list" class="active" target="_self">免费课程</a></li>
                    <li><a href="/" target="_self">实战课程</a></li>
                </ul>
                <@shiro.guest>
                <div class="header-right clearfix">
                    <div id="login-area">
                        <ul class="header-unlogin clearfix">
                            <li class="header-signin">
                                <a id="login" href="${s.base}/auth/login.html">登录</a> / <a href="${s.base}/auth/register.html">注册</a>
                            </li>
                        </ul>
                    </div>
                </div>
                </@shiro.guest>
        <@shiro.user>
            <!-- 登录之后显示用户的基本信息-start -->
            <div class="header-right clearfix">
                <div id="login-area">
                    <ul class="clearfix logined">
                        <li class="remind_warp">
                            <i class="msg_remind" style="display: inline;"></i>
                            <a target="_blank" href="${s.base}/user/notices.html">
                                <i class="imv2-notifications"></i>
                            </a>
                        </li>
                        <li class="user-card-box" id="header-user-card">
                            <a id="header-avator" class="user-card-item js-header-avator" action-type="my_menu" href="${s.base}/user/home.html" target="_self">
                                <img src='<@shiro.principal property="header"/>' width="40" height="40">
                                <i class="myspace_remind" style="display: none;"></i>
                                <span style="display: none;">动态提醒</span>
                            </a>
                            <div class="g-user-card">
                                <div class="card-inner">
                                    <div class="card-top clearfix">
                                        <a href="/u/2344629" class="l">
                                            <img src='<@shiro.principal property="header"/>' alt="第五丶轻柔"></a>
                                        <div class="card-top-right-box l">
                                            <a href="/u/2344629"><span class="name text-ellipsis">第五丶轻柔</span></a>
                                            <div class="meta">
                                                <a href="/u/2344629/experience">经验<b id="js-user-mp">30</b></a>
                                                <a href="/u/2344629/credit">积分<b id="js-user-credit">0</b></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="user-center-box">
                                        <ul class="clearfix">
                                            <li class="l"><a href="#" target="_blank">
                                                <span class="user-center-icon icon-tick">
                                                </span>我的课程</a>
                                            </li>
                                            <li class="l">
                                                <a href="#" target="_blank">
                                                    <span class="user-center-icon icon-receipt">
                                                    </span>订单中心</a>
                                            </li>
                                            <li class="l"><a href="#" target="_blank">
                                                <span class="user-center-icon icon-score_shop">
                                                </span>积分商城</a>
                                            </li>
                                            <li class="l"><a href="#" target="_blank">
                                                <span class="user-center-icon icon-set">
                                                </span>个人设置</a>
                                            </li>
                                        </ul>
                                    </div><div class="card-history">
                                    <span class="history-item">
                                        <span class="tit text-ellipsis">Java入门第一季</span>
                                        <span class="media-name text-ellipsis">1-1 Java简介</span>
                                        <i class="icon-clock"></i>
                                        <a href="#" class="continue" title="Java入门第一季1-1  Java简介">继续</a>
                                    </span>
                                </div><div class="card-sets clearfix">
                                    <a href="/auth/logout.html" class="l">安全退出</a>
                                </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 登录之后显示用户的基本信息-end -->
    </@shiro.user>
            </div>
        </div>

		<div id="main">

			<div class="wrap ">
				<div class="top">
					<div class="course-top clearfix">
						<a class="top-header" href="/course/list">
							<img src="${s.base}/res/i/logo-course.png?111" alt="免费课程" width="140" height="60">
						</a>
						<!-- 这是广告位，无论如何都得有这个容器分割上下元素 -->
						<div class="adver-con" style="display: inline-block;margin-left: 16px;">
							<img src="${s.base}/res/i/course-top.png" style="height:60px;width: 96px;">
						</div>
						<div class="course-top-search">
							<div class="search-area" data-search="top-banner">
								<input class="search-input" data-suggest-trigger="suggest-trigger" placeholder="搜索感兴趣的内容" type="text" autocomplete="off">
								<input type="hidden" class="btn_search" data-search-btn="search-btn">
								<ul class="search-area-result" data-suggest-result="suggest-result">
								</ul>
							</div>
							<div class="showhide-search" data-show="no"><i class="icon-search"></i></div>
						</div>
					</div>
					<div class="course-content">
						<div class="course-nav-box">
							<div class="course-nav-row clearfix">
								<span class="hd l">方向：</span>
								<div class="bd">
									<ul class="">
                                        <li class="course-nav-item <#if curCode?? && curCode=='-1'>on</#if> ">
                                            <a href="javascript:void(0)" onClick="_queryPage(1,'-1')">全部</a>
                                        </li>
                                        <#if classifys??>
                                            <#list classifys as item>
                                            <li class="course-nav-item <#if curCode?? && curCode == item.code>on</#if>">
                                                <a href="javascript:void(0)" onClick="_queryPage(1,'${item.code!}')">${item.name!}</a>
                                            </li>
                                            </#list>
                                        </#if>
									</ul>
								</div>
							</div>
							<div class="course-nav-row course-nav-skills clearfix">
								<div class="js-course-skills course-skills-box">
									<span class="hd l">分类：</span>
									<div class="bd">
										<ul class="">

                                            <li class="course-nav-item <#if curSubCode?? && curSubCode=='-2'>on</#if>">
                                                <a href="javascript:void(0)" onClick="_queryPage(1,'-2')">全部</a>
                                            </li>
                                            <#if subClassifys??>
                                                <#list subClassifys as item>
                                            <li class="course-nav-item <#if curSubCode?? && curSubCode == item.code>on</#if>">
                                                <a href="javascript:void(0)" onClick="_queryPage(1,'${item.code!}')">${item.name!}</a>
                                            </li>
                                                </#list>
                                            </#if>
										</ul>
									</div>
								</div>
							</div>
							<div class="course-nav-row clearfix border_bottom_none">


								<a href="javascript:;" class="course-recommend" onclick="_hmt.push(['_trackEvent', 'course', 'click', 'inlet'])"></a>

								<span class="hd l">难度：</span>
								<div class="bd">
									<ul class="">

										<li class="course-nav-item on">
											<a href="javascript:;">全部</a>
										</li>
										<!--<li class="course-nav-item ">-->
											<!--<a href="/course/list?is_easy=1">入门</a>-->
										<!--</li>-->
										<!--<li class="course-nav-item ">-->
											<!--<a href="/course/list?is_easy=2">初级</a>-->
										<!--</li>-->
										<!--<li class="course-nav-item ">-->
											<!--<a href="/course/list?is_easy=3">中级</a>-->
										<!--</li>-->
										<!--<li class="course-nav-item ">-->
											<!--<a href="/course/list?is_easy=4">高级</a>-->
										<!--</li>-->

									</ul>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>

			<div class="container">
				<div class="course-tool-bar clearfix">
					<div class="tool-left l">
						<a href="javascript:void(0)" class="moco-change-smalle-btn  <#if sort?? && sort=='last'>active</#if> " onclick="_queryPage(1,undefined,'last')">最新</a>
						<a href="javascript:void(0)" class="moco-change-smalle-btn <#if sort?? && sort=='pop'>active</#if> " onclick="_queryPage(1,undefined,'pop')">最热</a>
					</div>
					<div class="l">
                        <span class="tool-item" style="display: none;">
                            <a class="follow-learn tool-chk" href="javascript:void(0);">跟我学</a>
                        </span>
					</div>
					<div class="tool-right r">

                        <!--<span class="tool-item total-num">-->
                            <!--共<b>941</b>个课程-->
                        <!--</span>-->
						<span class="tool-item tool-pager">
                             <span class="pager-num">
                                <b class="pager-cur">${page.pageNum}</b>/<em class="pager-total">${page.pageTotalCount!}</em>
                            </span>
                        <#if !page.firstPage>
                            <a href="javascript:void(0);" class="pager-action pager-next "
                                        onclick="_queryPage(${page.pageNum-1})"><i class="icon-left2"></i></a>
                        <#else>
                             <a href="javascript:void(0);" class="pager-action pager-prev "
                                ><i class="icon-left2"></i></a>
                        </#if>
                        <#if !page.lastPage>
                        <a href="javascript:void(0);" class="pager-action pager-next"
                           onclick="_queryPage(${page.pageNum+1})"><i class="icon-right2"></i></a>
                        <#else>
                        <a href="javascript:void(0);" class="pager-action pager-prev"
                          ><i class="icon-right2"></i></a>
                        </#if>



                        </span>
					</div>

				</div>
				<div class="course-list">
					<div class="moco-course-list">
						<div class="clearfix">
                            <#if (page.items)??>
                            <#list page.items as item>
							<div class="course-card-container">
								<a target="_blank" href="${s.base}/course/learn/${item.id}.html" class="course-card">

									<div class="course-card-top">
                                        <#if (item.picture)?? && item.picture != ''>
                                        <img src="${item.picture!}" class="course-banner lazy">
                                        <#else>
                                        <img src="${s.base}/res/i/course.png" class="course-banner lazy">
                                        </#if>

										<div class="course-label">
											<label>${item.subClassifyName!}</label>
										</div>
									</div>
									<div class="course-card-content">
										<h3 class="course-card-name"  title="${item.name!}">${item.name!}</h3>
										<div class="clearfix course-card-bottom">
											<div class="course-card-info">
												<span>
                                                    <#if item.level == 1>
                                                    初级
                                                    <#elseif item.level == 2>
                                                    中级
                                                    <#else>
                                                    高级
                                                    </#if>
                                                </span>
                                                <span><i class="icon-set_sns"></i>${item.studyCount!}</span>
                                                <span><i class=""></i>￥${item.price!}</span>
											</div>
											<p class="course-card-desc">${item.brief!}</p>
										</div>
									</div>
								</a>
							</div>
                            </#list>
                            </#if>



							<!--<div class="course-card-container">-->
								<!--<a target="_blank" href="/learn/85" class="course-card">-->

									<!--<div class="course-card-top">-->
										<!--<img class="course-banner lazy" data-original="//img3.mukewang.com/57035ff200014b8a06000338-240-135.jpg" src="//img3.mukewang.com/57035ff200014b8a06000338-240-135.jpg" style="display: inline;">-->
										<!--<div class="course-label">-->
											<!--<label>Java</label>-->
										<!--</div>-->
									<!--</div>-->
									<!--<div class="course-card-content">-->
										<!--<h3 class="course-card-name">Java入门第一季</h3>-->
										<!--<div class="clearfix course-card-bottom">-->
											<!--<div class="course-card-info">-->
												<!--<span>入门</span><span><i class="icon-set_sns"></i>898247</span>-->
											<!--</div>-->
											<!--<p class="course-card-desc">本教程从Java环境搭建、工具使用、基础语法开始，带你入门</p>-->
										<!--</div>-->
									<!--</div>-->
								<!--</a>-->
							<!--</div>-->


						</div>
					</div>

<#if (page.pageTotalCount)?? && page.pageTotalCount gt 1>
    <div class="page">
        <#if !page.firstPage>
        <a href="javascript:void(0);" onclick="_queryPage(1)">首页</a>
        <a href="javascript:void(0);" onclick="_queryPage(${page.pageNum-1})">上一页</a>
        </#if>
        <#list page.showNums as n>
            <#if page.showDot && n_index == 6>
            <a class="text-page-tag" href="javascript:void(0);">...</a>
            </#if>
            <#if page.pageNum == n>
            <a class="text-page-tag active" href="javascript:void(0);" >${n}</a>
            <#else>
            <a class="text-page-tag" href="javascript:void(0);" onclick="_queryPage(${n});">${n}</a>
            </#if>
        </#list>

        <#if !page.lastPage>
            <a href="javascript:void(0);" onclick="_queryPage(${page.pageNum+1})">下一页</a>
            <a href="javascript:void(0);" onclick="_queryPage(${page.pageTotalCount!})">尾页</a></div>
        </#if>
	</div>
</#if>
			</div>

		</div>
        <div class="top-wrap-box">
            <!-- 顶部广告banner -->
            <div class="banner-bg-box clearfix">
                <a class="banner-item l" href="http://www.imooc.com/topic/pyzt?mc_marking=fa40c055a843d0d2fbdf3d161732131d&amp;mc_channel=banner1" data-track="szbanner-1-1" target="_blank" style="background-image: url(//img4.mukewang.com/5b86030f0001db9e05900120.jpg)" title="python">
                </a>
                <a class="banner-item r" href="http://www.imooc.com/topic/vuejs?mc_marking=b0c76ff4bae9559b37b09980ef84de54&amp;mc_channel=banner1" data-track="szbanner-1-2" target="_blank" style="background-image: url(//img.mukewang.com/5b568bc40001b45905900120.jpg)" title="vue">
                </a>
            </div>
            <!-- 顶部广告banner end -->
        </div>

        <div class="elevator">
            <a href="/user/feedback" class="elevator-msg" target="_blank">
                <i class="fa fa-comment-o"></i>
                <span class="">意见反馈</span>
            </a>
            <a href="/help" class="elevator-faq" target="_blank">
                <i class="fa fa-question-circle-o"></i>
                <span class="">帮助中心</span>
            </a>
            <a href="https://weibo.com/qingzhidian?is_hot=1" target="_blank" class="elevator-app">
                <i class="fa fa-weibo"></i>
                <span class="">官方微博</span>
            </a>
            <a href="javascript:void(0)" class="elevator-weixin no-goto" id="js-elevator-weixin">
                <i class="fa fa-weixin"></i>
                <span class="">官方微信</span>
                <div class="elevator-weixin-box"></div>
            </a>
            <a href="javascript:void(0)" class="elevator-top no-goto" style="display: none;" id="backTop">
                <i class="fa fa-chevron-up"></i>
                <span class="">返回顶部</span>
            </a>
        </div>

        <div id="footer">
            <div class="waper">
                <div class="footerwaper clearfix">
                    <!--<div class="followus r">-->
                        <!--<a class="followus-weixin" href="javascript:;" target="_blank" title="微信">-->
                            <!--<div class="flw-weixin-box"></div>-->
                        <!--</a>-->
                        <!--<a class="followus-weibo" href="https://weibo.com/qingzhidian?is_hot=1" target="_blank" title="新浪微博"></a>-->
                        <!--<a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>-->
                    <!--</div>-->
                    <div class="footer_intro l">
                        <div class="footer_link">
                            <ul>
                                <li><a href="/" target="_blank">网站首页</a></li>
                                <!--<li><a href="//www.imooc.com/index/companytrain" target="_blank" title="企业合作">企业合作</a></li>-->
                                <li><a href="https://weibo.com/qingzhidian?is_hot=1" target="_blank">官方微博</a></li>
                                <li> <a href="/about/contact" target="_blank">联系我们</a></li>
                                <li> <a href="/user/feedback?coding" target="_blank">意见反馈</a></li>
                                <li> <a href="/about/friendly" target="_blank">友情链接</a></li>
                                <li><a href="/about/us" target="_blank">关于我们</a></li>
                            </ul>
                        </div>
                        <p>Copyright © 2018 qingzhidian.com All Rights Reserved | 京ICP备16062200号-1 </p>
                    </div>
                </div>
            </div>
        </div>
		
		<script type="text/javascript">
			var _code = '${curCode}';
			var _subCode = '${curSubCode}';
			var _sort = '${sort!}';

            $(function(){
                var headPhoto = $('#headerUserHeader').attr('src');
                if(headPhoto == null || headPhoto == '' || headPhoto == 'null'){
                    var headPhoto = "${s.base}/res/i/header.jpg";
                    $('#headerUserHeader').attr('src',headPhoto);
                }

                if(SHIRO_LOGIN){
                    //获取当前用户学习进度
                    $.ajax({
                        url:CONTEXT_PATH + '/course/getCurLeanInfo.html',
                        type:'POST',
                        dataType:'json',
                        success:function(resp){
                            if(resp.errcode == 0 && resp.data){
                                var learnUrl = CONTEXT_PATH+"/course/learn/"+resp.data.curCourse.id+".html";
                                var learnTitle = resp.data.curCourse.name;
                                $('#curCourseA').attr('href',learnUrl)
                                $('#curCourseSpan').attr('title',learnTitle).html(learnTitle);

                                var videoUrl = CONTEXT_PATH+"/course/video/"+resp.data.curCourseSection.id+".html";
                                var videoTitle = resp.data.curCourseSection.name;
                                $('#curCourseSectionA').attr('href',videoUrl)
                                $('#curCourseSectionSpan').attr('title',videoTitle).html(videoTitle);
                            }
                        }
                    });
                    var w = 0;
                    $("#header-user-card").on("mouseenter",function() {
                        clearTimeout(w),
                        $(this).hasClass("hover") || $(this).addClass("hover")
                    }).on("mouseleave",function(e) {
                        e.stopPropagation();
                        var a = $(this);
                        w = setTimeout(function() {
                            a.hasClass("hover") && a.removeClass("hover")
                        },300)
                    });
                    $('#userdetail,#nav_list').on("mouseenter",
                        function() {
                            $('#userdetail').addClass("hover"),
                                $("#nav_list").show()
                        });
                    $('#userdetail,#nav_list').on("mouseleave",
                        function() {
                            $('#userdetail').removeClass("hover"),
                                $("#nav_list").hide()
                        });
                }

                //搜索
                $(".search-input").on("focus",function () {
                    $(".search-wrap").addClass("search-focus");
                }).on("blur",function () {
                    $(".search-wrap").removeClass("search-focus");
                });
            });
			function _queryPage(pageNum,code,sort){
				var params = '?pageNum='+pageNum;
				//分类，参数没有就用页面缓存 
				if(code == undefined){//来自于分页按钮
					code = _code;
					if(_subCode != '-2'){
						code = _subCode; //优先使用 subCode 
					}
				}
				if(code == '-2'){//点击分类的全部
					code = _code;
				}
				if(code != '-1' && code != ''){
					params += '&c='+code;
				}
				
				//排序，函数参数没有就用页面缓存 
				if(sort == undefined && _sort != ''){
					sort = _sort;
				}
				if(sort != undefined){
					params += '&sort='+sort;
				}
				window.location.href='${s.base}/course/list.html'+params;
			}
		</script>

		
	</body>
	
</html>
